<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="demo"></div>
    <input type="text" id="inp">
    <script>
        // var obj = {};
        // obj.test = '123'
        // Object.defineProperty(obj, 'name', {
        //     get: function () {
        //         console.log('我被获取了')
        //         return val;
        //     },
        //     set: function (newVal) {
        //         console.log('我被设置了')
        //     }
        // })
        // obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
        // console.log(obj.name);//undefined
        // console.log(obj.test);//123
        // var val = obj.name;//在得到obj的name属性，会触发get方法

        /////////////////////////////////////////////////
        var obj = {};
        var demo = document.querySelector('#demo')
        var inp = document.querySelector('#inp')
        Object.defineProperty(obj, 'name', {
            get: function () {
                return val;
            },
            set: function (newVal) {//当该属性被赋值的时候触发
                inp.value = newVal;
                demo.innerHTML = newVal;
            }
        })
        inp.addEventListener('input', function (e) {
            // 给obj的name属性赋值，进而触发该属性的set方法
            obj.name = e.target.value;
        });
        obj.name = 'fei';//在给obj设置name属性的时候，触发了set这个方法
    </script>
</body>

</html>